<template>
  <ul>
    <li>
        <a href="https://www.vmall.com/bporder/wcart" target="_blank">
            <i class="iconfont">&#xe655;</i>
            <p>购物车</p>
        </a>
    </li>
    <li>
        <a href="https://id1.cloud.huawei.com/CAS/portal/loginAuth.html">
            <i class="iconfont">&#xe73b;</i>
            <p>在线客服</p>
        </a>
    </li>
    <li>
        <a href="https://www.vmall.com/help/index.html" target="_blank">
            <i class="iconfont">&#xe60c;</i>
            <p>自助服务</p>
        </a>
    </li>
    <li v-if="showBackTop">
            <a href="javascript:;">
                <el-backtop>
                    <i class="iconfont">&#xe65b;</i>
                    <p>返回顶部</p>
                </el-backtop>
            </a>
    </li>
  </ul>
</template>

<script>
import { onMounted, ref } from 'vue'
import { ElBacktop } from 'element-plus'
export default {
  name: 'VmFloatToolbar',
  components: { ElBacktop },
  props: {
    y: {
        type: Number,
        default: 300
    }
  },
  setup (props) {
    const showBackTop = ref(false) // 展示返回顶部
    const scrollY = ref(props.y) // 卷动高度
    onMounted(() => {
        window.addEventListener('scroll', () => {
        if (window.scrollY >= scrollY.value) showBackTop.value = true
        else showBackTop.value = false
    }, true)
    })
    return { showBackTop }
  }
}
</script>

<style lang="scss" scoped>
ul::v-deep {
    background: #FFF;
    position: fixed;
    bottom: 3%;
    right: 1%;
    z-index: 99999999;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #7b7c7d, -1px -1px 5px #7b7c7d;
    li {
        padding-top: 15px;
        width: 80px;
        text-align: center;
        a {
            .el-backtop {
                flex-direction: column;
                position: static;
                width: 100%;
                min-height: 70px;
                box-shadow: none;
                color: #acbdc5;
                i {
                    font-size: 24px;

                }
            }
            color: #acbdc5;
            i {
                font-size: 28px;
            }
            p {
                font-size: 12px;
            }
            &:hover {
                color: #c53d43;
            }
        }
        
        &:last-child {
            padding-bottom: 15px;
        }
    }
}
</style>> 
